<template>
  <view>
    <!-- 轮播图区域 -->
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
      <swiper-item v-for="(item,index) in swiperList" :key="index">
        <navigator class="swiper-item" :url="'/subpkg/goods_detail/goods_detail?goods_id='+item.goods_id">
          <image :src="item.image_src" ></image>
        </navigator>
      </swiper-item>
    </swiper>
 <!-- 分类导航区域 -->
    <view class="cateNav_box">
      <view class="" v-for="(item,i) in CateNavList" :key="i" @click="switchCate(item.name)">
        <image :src="item.image_src" mode=""></image>
      </view>
    </view>
 <!-- 楼层区域 -->
 <view class="floor_box">
  <view class="floor_setion" v-for="(item,i) in floorList" :key="i">
      <image class="floor_title" :src="item.floor_title.image_src" mode=""></image>
    <!-- 图片区域-->
    <view class="pic_box">
      <navigator :url="item.product_list[0].navigator_url"  class="left_img_box">
        <image :src="item.product_list[0].image_src" mode="widthFix" :style="{width:item.product_list[0].image_width+'rpx'}"></image>
      </navigator>
      <view class="right_img_box">
        <navigator :url="item2.navigator_url" class="" v-for="(item2,i2) in item.product_list" v-if="i2!=0" :key="i2">
          <image mode="widthFix"   :src="item2.image_src" :style="{width:item2.image_width+'rpx'}"></image>
        </navigator>
      </view>
    </view>
  </view>
 </view>
<!-- <image class="floor_title" :src="item.floor_title.image_src" mode=""></image>
 <view class="pic_box">
   <view class="left_img_box">
     <image :src="item.product_list[0].image_src" mode="" :style="{width:item.product_list[0].image_width+'rpx'}"></image>
   </view>
   <view class="right_img_box">
      <image mode="" v-for="(item2,i2) in item.product_list" v-if="i2!=0"  :src="item2.image_src" :style="{width:item2.image_width+'rpx'}"></image>
   </view>
 </view> -->
 
 
  </view>

</template>

<script>
  import badgeMix from '@/mixins/tabbar-badge.js'
  export default {
    mixins:[badgeMix],
    data() {
      return {
        swiperList:[],
        CateNavList:[],
        floorList:[]
      };
    },
    onLoad(){
      this.getSwiperList(),
      this.getCateNavList(),
      this.getFloorList()
    },
    methods:{
      // 获取轮播图图片数据
      async getSwiperList(){
       const {data:res}=await uni.$http.get('/api/public/v1/home/swiperdata')
       if(res.meta.status!=200){
         return uni.$showMsg('请求数据失败！')
       }else{
         uni.$showMsg('请求数据成功')
         this.swiperList=res.message
       }
      },
       // 获取分类导航图片数据
      async getCateNavList(){
        const {data:res}=await uni.$http.get('/api/public/v1/home/catitems')
        if(res.meta.status!=200){
          return uni.$showMsg('请求数据失败！')
        }else{
          uni.$showMsg('请求数据成功')
          this.CateNavList=res.message
          // console.log('>>>>',res.message)
        }
      },
      //点击分类导航切换tab页
      switchCate(name){
        if(name=='分类'){
          uni.switchTab({
            url:"../cate/cate?query="+name
          })
        }
      },
     async getFloorList(){
        const {data:res}=await uni.$http.get('/api/public/v1/home/floordata')
        if(res.meta.status!=200) uni.$showMsg('请求数据失败！')
        uni.$showMsg('请求数据成功！')
        res.message.forEach((item)=>{
          item.product_list.forEach((item)=>{
            const params=item.navigator_url.split('?')
            item.navigator_url='/subpkg/goods_list/goods_list?'+params[1]
          })
        })
        this.floorList=res.message
        
        console.log('......',res.message)
      }
    }
  }
</script>

<style lang="scss">
swiper{
  height: 330rpx;
  .swiper-item,
  image{
    height: 100%;
    width: 100%;
  }
}
.cateNav_box{
  padding-top: 40rpx;
  display: flex;
   justify-content: space-between;
   // flex: 1;
   height: 150rpx;
   image{
     width: 150rpx;
     height: 150rpx;
   }
}
.floor_box{
  width: 100%;
  margin-top: 40rpx;
  padding-left: 10rpx;
  .floor_setion{
    margin-bottom: 20rpx;
    .right_img_box{
      display: flex;
      justify-content: space-evenly;
       flex-wrap: wrap;
       image{
         height: 233rpx;
       }
    }
  }
  .floor_title{
     height: 60rpx;
      width: 100%;
      // display: flex;
  }
}
  .pic_box{
    display:flex;
  }
</style>
